<template>
    <div style="margin-top: 10px">
        <el-row type="flex" >
            <el-col flex="50"> {{label}}</el-col>
            <el-col v-if="!removeAdd"  flex="1">  <el-button  :disabled="disabled" type="primary" icon="md-add" @click="addRow"></el-button></el-col>
            <el-col  flex="1" style="margin-left: 3px">  <el-button  :disabled="disabled" type="error" icon="md-remove" @click="deleteRow"></el-button></el-col>
            <el-col  flex="1" style="margin-left: 3px">  <el-button  :disabled="disabled"  type="info" icon="ios-expand" @click="expand"></el-button></el-col>
        </el-row>
        <el-row style="margin-top: 3px">
            <el-col span="24">
                <el-table
                        max-height="450"
                        :disabled="disabled"
                        :loading="loading"
                        border
                        :columns="columns"
                        :data="data"
                        ref="table"
                        sortable="custom"
                        @on-selection-change="changeSelect">
                </el-table>
            </el-col>
        </el-row>
      <div  v-if="modalShow">
        <Modal ref="fullScreenModal" v-model="modalVisible" fullscreen title="全屏表格" :closable="false" :on-visible-change="setModalVisible">
          <el-row type="flex" justify="end">
            <el-col v-if="!removeAdd">  <el-button  type="primary" icon="md-add" @click="addel-row"></el-button></el-col>
            <el-col style="margin-left: 3px">  <el-button  type="error"  icon="md-remove" @click="deleteel-row"></el-button></el-col>
            <el-col style="margin-left: 3px">  <el-button type="info" icon="ios-expand" @click="expand"></el-button></el-col>
          </el-row>
          <el-row style="margin-top: 3px">
            <el-col span="24">
              <el-table
                  :loading="loading"
                  border
                  :columns="columns"
                  :data="data"
                  ref="table"
                  sortable="custom"
                  @on-selection-change="changeSelect">
              </el-table>
            </el-col>
          </el-row>
          <template #footer>
            <el-button type="primary" @click="setModalVisible(false)">确定</el-button>
          </template>
        </Modal>
      </div>

    </div>
</template>

<script>
    export default {
        name: "yh-sub-table",
        data(){
            return{
                loading:false,
                selectList: [],
                removeList:[],
                selectCount: 0,
                modalVisible:false,
                modalShow:false,
				data:this.modelValue
            }
        },
        props:{
            columns:{
                type:Array
            },
            modelValue:{
                type:Array,
            },
            singleItem:{
                type:Object
            },
            label:{
                type:String
            },
            disabled:{
                type:Boolean,
                default:false
            },
            removeAdd:{
              type:Boolean,
              default:false
            }
        },
        methods:{
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            changeSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            addRow(){
                console.log("增加前："+JSON.stringify(this.data))
                let item = Object.assign({_cdstamp:this.getTimeStamp(),_item_op:"append"},this.singleItem);
                this.data.push(item);
                console.log("增加后："+JSON.stringify(this.data))
				this.$emit("update:modelValue", this.data)
            },
            deleteRow(){
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择要删除的数据");
                    return;
                }
                console.log("selectList:"+JSON.stringify(this.selectList))
                for(let selectItem of this.selectList) {
                    //将删除的记录 放置进删除列表
                    if(selectItem.id){
                        this.removeList.push(Object.assign(selectItem,{_item_op:"remove"}))
                    }
                    for(let i=this.data.length-1;i>=0;i--) {
                        if(selectItem._cdstamp === this.data[i]._cdstamp) {
                            this.data.splice(i, 1)
                            break
                        }
                    }
                }
				this.$emit("update:modelValue", this.data)
            },
            expand(){
               this.setModalVisible(true);
            },
            setModalVisible(val){
                this.modalVisible = val;
                this.modalShow = val;
            },
            getFinalList(){
                return this.data.concat(this.removeList);
            },
            getTimeStamp(){
                return new Date().getTime();
            }
        },
    }
</script>

<style scoped>

</style>
